<template>
    <div class="mainDiv" style="color:#000;overflow: hidden;">
        <el-row>
            <el-steps :active="active" center finish-status="success" style="margin: 15px 15px 0px !important" align-center>
                <el-step title="下订单"></el-step>
                <el-step title="结账分配业绩和提成"></el-step>
            </el-steps>
        </el-row>
        <el-row :gutter="20" v-if="active == 0" class="mainDiv" style="margin: 0px">   
            <order @goto="step" :orderprops="order" :orderlistprops="orderlist" :ginfoprops="ginfo"></order>
        </el-row>

        <el-row :gutter="20" v-else class="mainDiv" style="padding:10px;margin: 0px">
            <el-tabs v-model="activeName">
              <el-tab-pane label="开单结账" name="first">
                <Pay @goto="step" :orderprops="order" :paylistprops="paylist" :yejilistprops="yejilist" :orderlistprops="orderlist" :ginfoprops="ginfo"></Pay>
              </el-tab-pane>
              <el-tab-pane label="订单详情" name="second">
                <Orderinfo @goto="step" :order="order" :orderlistprops="orderlist" :ginfoprops="ginfo"></Orderinfo>
              </el-tab-pane>
            </el-tabs>
        </el-row>
    </div>
</template>
<script>
import C from '@/common/common.js'
import order from './order.vue'
import Pay from './pay.vue'
import Orderinfo from './orderinfo.vue'
import headImg from '#/img/headimg.jpg'
export default {
  name: 'openOrder',
  data () {
    return {
      // 重要数据（开单）
      order: { id: '', status: '', remarks: '' },
      orderlist: [],
      ginfo: {},
      paylist: [],
      yejilist: [],
      active: 0,
      activeName: 'first',
      quanxian: {
        add: 'order_add',
        jiezhang: 'order_jie',
        fanjiezhang: 'order_fan',
        dayin: 'order_print',
        fenpei: 'order_fen',
        fanfenpei: 'order_fanfen',
        chongxinfenpei: 'order_chongxin'
      }
    }
  },
  methods: {
    step: async function (obj) {
      // 第一步，如果有id掉数据，没有添加
      // 步骤说明：订单的status=0可以在0,1页面，status=1可以在1,2页面，status=3可以在2,3页面
      if (obj.id) {
        this.order.id = obj.id
      }
      if (obj.status) {
        this.order.status = obj.status
      }

      if (obj.index == 0 && (this.order.status && this.order.status != 0)) {
        C.error('请先反结账订单再编辑！')
        return false
      }
      if (obj.index == 1 && !this.order.id) {
        C.error('请先保存订单！')
        return false
      }
      if (obj.index == 2) {
        if (!this.order.id || this.order.status == 0) {
          C.error('请先结账！')
          return false
        }
      }
      console.log(obj)
      console.log(this.order)
      if (this.order.id) {
        this.getorderinfo(this.order.id)
      }
      this.active = obj.index
    },
    getorderinfo: async function (id) {
      let data = await C.ajax('/shop/order/getorderinfo', { orderid: id }, 'post')
      console.log(data)
      if (data) {
        // 赋值用户信息
        data.ginfo.headurl = data.ginfo.headurl != 0 ? data.ginfo.headurl : headImg
        this.ginfo = data.ginfo
        this.issanke = !!(this.ginfo.id == 1 || this.ginfo.id == 2)
        if (this.issanke) this.ginfoid = this.ginfo.id
        // 整合订单列表信息
        data.orderlist.forEach((row) => {
          if (row.consumetype == 1 && row.type == 1) {
            row.rowtype = 1
          } else if (row.consumetype == 1 && row.type == 2) {
            row.rowtype = 2
          } else if (row.consumetype == 2) {
            row.rowtype = 3
          } else {
            row.rowtype = 4
          }
          console.log(row.userTypeList)
          // fen
          if (row.userTypeList.length > 0) {
            // 整合信息
            let fenList = []
            row.userTypeList.forEach((rows) => {
              let key = C.inarray({subjectchildclassid: rows.classid}, fenList)
              if (key > -1) {
                fenList[key].userFenList.push({
                  id: rows.userid,
                  name: rows.uname,
                  percent: rows.percent,
                  fuwutype: rows.fuwutype
                })
              } else {
                fenList.push({
                  userid: rows.userid,
                  username: rows.uname,
                  name: rows.name,
                  fuwutype: rows.fuwutype,
                  subjectchildclassid: rows.classid,
                  userFenList: [{
                    id: rows.userid,
                    name: rows.uname,
                    disabled: true,
                    percent: rows.percent,
                    fuwutype: rows.fuwutype
                  }]
                })
              }
            })
            row.userTypeList = fenList
          }
        })
        if (this.orderlist.length <= 0) this.orderlist = data.orderlist
        // 赋值订单信息
        this.order = data.orderinfo
        this.paylist = data.alist
        this.yejilist = data.yejilist
        console.log(5236)
      }
    }
  },
  mounted: async function () {
    let data = C.getDatas()
    if (data.gid) {
      this.order.ginfo.id = data.gid
    }
    if (data.id) {
      this.order.id = Number(data.id)
    }
    if (data.status !== '') {
      this.order.status = Number(data.status)
    }
    // id = 1257
    if (!this.order.status && !this.order.id) {
      this.step({index: 0})
    } else {
      this.step({index: Number(this.order.status) + 1})
    }
  },
  components: {
    order, Pay, Orderinfo
  }
}
</script>
<style>
.el-input.is-disabled .el-input__inner {
  color: #324057;
}

.el-textarea__inner {
  resize: none;
}

#discount {
  width: 100px;
}

#discount i {
  display: none;
}

.el-switch.is-checked .el-switch__core {
  border-color: #20a0ff !important;
  background-color: #20a0ff !important;
}

.money input {
  background: #defff5;
}

.el-table__row .cell {
  padding: 0px !important;
  text-align: center
}

.el-table th > .cell {
  padding: 0px !important;
  text-align: center
}
.cell input {
  text-align: center
} 

#opencard {
  color: #000;
  height: 100%;
}

.itemClass .el-form-item__content {
  height: 100%;
  position: absolute;
  display: flex;
  flex-direction: column;
  margin: 0px !important;
  padding-left: 80px;
  box-sizing: border-box;
}

.itemClass {
  height: 100%;
  position: relative;
}

.el-table td, .el-table th {
  padding: 0px;
  line-height: 32px;
  height: 32px;
}

.table-line-input input {
  width: 100%;
  border: none;
  padding: 0px;
  text-align: center
}
.child-line{
  border: 1px solid #ebeef5;
  text-align: center
}
.child-line input{
  text-align: center
}
.el-table__expanded-cell[class*=cell] {
    padding: 10px;
}
.leftside-line{
  margin-bottom: 10px;
}
.textarea-remarks textarea {
  border: none;
  background: rgb(249, 249, 249);
}
</style>